<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    uploadImage() {
      uni.showToast({
        title: '上传功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<template>
  <view class="container">
    <view class="content">
      <view class="title">OCR识别</view>
      <view class="description">在此页面您可以使用OCR功能识别图片中的文字</view>
      
      <view class="feature-box">
        <view class="feature-icon">
          <image src="/static/home/ocr.png" mode="aspectFit"></image>
        </view>
        <view class="feature-desc">
          支持多种语言文字识别，拍照或上传图片即可将图片中文字转换为可编辑文本
        </view>
      </view>
      
      <view class="btn-wrapper">
        <button class="primary-btn" @click="uploadImage">上传图片</button>
      </view>
    </view>
    
    <view class="tips-box">
      <view class="tips-title">
        <text class="tips-icon">ℹ</text>
        <text>使用提示</text>
      </view>
      <view class="tips-content">
        <text>· 确保图片清晰，光线充足</text>
        <text>· 尽量保持文字水平</text>
        <text>· 每次可处理一张图片</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #f5f7fa;
}
.content {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(90, 135, 254, 0.1);
  margin-bottom: 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.description {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}
.feature-box {
  display: flex;
  background-color: rgba(90, 135, 254, 0.05);
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
  border: 1px solid rgba(90, 135, 254, 0.1);
}
.feature-icon {
  width: 100rpx;
  height: 100rpx;
  background-color: rgba(90, 135, 254, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  padding: 15rpx;
}
.feature-icon image {
  width: 80%;
  height: 80%;
}
.feature-desc {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.btn-wrapper {
  margin-top: 60rpx;
}
.primary-btn {
  background: linear-gradient(135deg, #5A87FE, #6E9AFF);
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
  border: none;
  box-shadow: 0 6rpx 15rpx rgba(90, 135, 254, 0.2);
}
.primary-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

/* 提示信息 */
.tips-box {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(90, 135, 254, 0.1);
}
.tips-title {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.tips-icon {
  color: #5A87FE;
  margin-right: 10rpx;
  font-size: 32rpx;
}
.tips-content {
  display: flex;
  flex-direction: column;
}
.tips-content text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
}
</style> 